<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';


// 购物车产品数据
const cartItems = reactive([
  {
    id: 1,
    name: "Royal Palm Sofa",
    attributes: "米色 / 三人座",
    price: 1000.99,
    quantity: 1,
    image: "https://img.js.design/assets/img/624145e9ae8555477f62d793.png",
    selected: true
  },
  {
    id: 2,
    name: "Leatherette Sofa",
    attributes: "棕色 / 双人座",
    price: 845.50,
    quantity: 2,
    image: "https://img.js.design/assets/img/624145ea67aa597285bb9b92.png",
    selected: false
  },
  {
    id: 3,
    name: "Modern Coffee Table",
    attributes: "原木色",
    price: 399.00,
    quantity: 1,
    image: "https://img.js.design/assets/img/624145e9ae8555477f62d793.png",
    selected: true
  }
]);

// 计算全选状态
const isAllSelected = computed(() => {
  return cartItems.length > 0 && cartItems.every(item => item.selected);
});

// 计算已选产品数量
const selectedCount = computed(() => {
  return cartItems.filter(item => item.selected).length;
});

// 计算总金额
const totalAmount = computed(() => {
  return cartItems
    .filter(item => item.selected)
    .reduce((sum, item) => sum + item.price * item.quantity, 0);
});

// 切换全选状态
const toggleSelectAll = () => {
  const newState = !isAllSelected.value;
  cartItems.forEach(item => item.selected = newState);
};

// 切换单个产品选择状态
const toggleSelect = (item) => {
  item.selected = !item.selected;
};

// 增加产品数量
const increaseQuantity = (item) => {
  if (item.quantity < 99) {
    item.quantity++;
  } else {
    uni.showToast({
      title: '已达最大数量',
      icon: 'none'
    });
  }
};

// 减少产品数量
const decreaseQuantity = (item) => {
  if (item.quantity > 1) {
    item.quantity--;
  }
};

// 删除选中产品
const deleteSelected = () => {
  if (selectedCount.value === 0) return;

  uni.showModal({
    title: '提示',
    content: '确定要删除选中的产品吗？',
    success: (res) => {
      if (res.confirm) {
        for (let i = cartItems.length - 1; i >= 0; i--) {
          if (cartItems[i].selected) {
            cartItems.splice(i, 1);
          }
        }

        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      }
    }
  });
};

// 前往结算
const checkout = () => {
  if (selectedCount.value === 0) return;

  uni.navigateTo({
    url: '/pages/order/confirm'
  });
};

// 去购物
const goShopping = () => {
  uni.switchTab({
    url: '/pages/home/index'
  });
};
</script>
<template>
  <view class="cart-page page-wrapper">
    <!-- 顶部导航 -->
    <view class="cart-header">
      <text class="header-title">订货单</text>
    </view>

    <!-- 订货单为空的状态 -->
    <view class="empty-cart" v-if="cartItems.length === 0">
      <image class="empty-icon" src="https://img.js.design/assets/img/624145e9ae8555477f62d793.png" mode="aspectFit">
      </image>
      <text class="empty-text">订货单还是空的</text>
      <view class="go-shopping-btn" @tap="goShopping">去逛逛</view>
    </view>

    <!-- 订货单列表 -->
    <view v-else class="cart-list">
      <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
        <view class="checkbox-wrapper" @tap="toggleSelect(item)">
          <view class="checkbox" :class="{ selected: item.selected }">
            <wd-icon v-if="item.selected" name="check" size="32rpx" color="#fff"></wd-icon>
          </view>
        </view>
        <view class="item-image">
          <image :src="item.image" mode="aspectFill"></image>
        </view>
        <view class="item-content">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-attr">{{ item.attributes }}</text>
          <view class="item-bottom">
            <text class="item-price">¥{{ item.price.toFixed(2) }}</text>
            <view class="quantity-control">
              <view class="quantity-btn minus" @tap="decreaseQuantity(item)">
                <wd-icon name="minus" size="24rpx" :color="item.quantity <= 1 ? '#ccc' : '#666'"></wd-icon>
              </view>
              <view class="quantity-value">{{ item.quantity }}</view>
              <view class="quantity-btn plus" @tap="increaseQuantity(item)">
                <wd-icon name="add" size="24rpx" color="#666"></wd-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="cart-footer">
      <view class="footer-left">
        <view class="select-all" @tap="toggleSelectAll">
          <view class="checkbox" :class="{ selected: isAllSelected }">
            <wd-icon v-if="isAllSelected" name="check" size="32rpx" color="#fff"></wd-icon>
          </view>
          <text>全选</text>
        </view>
      </view>
      <view class="footer-right">
        <view class="total-info">
          <text class="total-text">合计:</text>
          <text class="total-price">¥{{ totalAmount.toFixed(2) }}</text>
        </view>
        <view class="checkout-btn" @tap="checkout" :class="{ disabled: selectedCount === 0 }">
          订货({{ selectedCount }})
        </view>
      </view>
    </view>
  </view>
</template>



<style lang="scss" scoped>
.cart-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  height: calc(100vh - (--status-bar-height) + 100rpx);

  .cart-header {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 50rpx;
    background-color: #fff;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #efefef;

    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .edit-text {
      font-size: 30rpx;
      color: #666;
    }
  }

  .empty-cart {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .empty-icon {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }

    .empty-text {
      font-size: 32rpx;
      color: #999;
      margin-bottom: 40rpx;
    }

    .go-shopping-btn {
      padding: 20rpx 60rpx;
      background-color: var(--wot-color-theme, #242424);
      color: #fff;
      font-size: 30rpx;
      border-radius: 40rpx;
    }
  }

  .cart-list {
    overflow-y: auto;
    width: 100%;
    flex: 1;
    padding: 0 32rpx;
    margin-top: 32rpx;

    .cart-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-radius: var(--border-radius);
      box-shadow: var(--f-box-shadow);
      background-color: #fff;
      margin-bottom: 20rpx;

      .checkbox-wrapper {
        padding: 20rpx;
        margin-right: 10rpx;

        .checkbox {
          width: 44rpx;
          height: 44rpx;
          border-radius: 50%;
          border: 2rpx solid #ddd;
          display: flex;
          align-items: center;
          justify-content: center;

          &.selected {
            background-color: var(--wot-color-theme, #242424);
            border-color: var(--wot-color-theme, #242424);
          }
        }
      }

      .item-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        overflow: hidden;
        margin-right: 24rpx;
        background-color: #f9f9f9;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 160rpx;
        position: relative;

        .item-name {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .item-attr {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 20rpx;
        }

        .item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;

          .item-price {
            font-size: 34rpx;
            color: #4E5A37;
          }

          .quantity-control {
            display: flex;
            align-items: center;

            .quantity-btn {
              width: 50rpx;
              height: 50rpx;
              border: 1rpx solid #ddd;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .quantity-value {
              width: 70rpx;
              text-align: center;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }

  .cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    width: 100%;
    padding-bottom: 0;
    background-color: #fff;
    border-top: 1rpx solid #eee;

    .footer-left {
      .select-all {
        display: flex;
        align-items: center;

        .checkbox {
          width: 44rpx;
          height: 44rpx;
          border-radius: 50%;
          border: 2rpx solid #ddd;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;

          &.selected {
            background-color: var(--wot-color-theme, #242424);
            border-color: var(--wot-color-theme, #242424);
          }
        }

        text {
          font-size: 30rpx;
          color: #333;
        }
      }
    }

    .footer-right {
      display: flex;
      align-items: center;

      .total-info {
        margin-right: 30rpx;

        .total-text {
          font-size: 28rpx;
          color: #333;
          margin-right: 10rpx;
        }

        .total-price {
          font-size: 34rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .checkout-btn,
      .delete-btn {
        padding: 20rpx 40rpx;
        background-color: var(--wot-color-theme, #242424);
        color: #fff;
        font-size: 30rpx;
        border-radius: 40rpx;

        &.disabled {
          background-color: #ccc;
          color: #fff;
        }
      }

      .delete-btn {
        background-color: #ff4d4f;
      }
    }
  }
}
</style>